<template>
  <StudentLayout>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="学生管理" name="first">
        <el-form :model="form" @submit.native.prevent label-width="auto">
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label="院系">
                <el-select v-model="form.sdept_id" placeholder="请选择院系" @change="changeClass">
                  <el-option :label="item.name" :value="item._id"
                    v-for="(item, index) in allData.sdept"
                    :key="index"
                    />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="班级名称">
                <el-select v-model="form.class_name" placeholder="请选择班级" @change="changeStudent">
                  <el-option :label="item.name" :value="item.name"
                    v-for="(item, index) in allData.classs"
                    :key="index"
                    />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" :icon="Plus" @click="addStudent()">新增学生</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="allData.student" style="width: 100%">
          <el-table-column prop="stu_id" label="学生学号" />
          <el-table-column prop="sdept_name" label="院系" />
          <el-table-column prop="class_name" label="班级" />
          <el-table-column prop="stu_name" label="学生姓名" />
          <el-table-column prop="stu_age" label="学生年龄" />
          <el-table-column prop="stu_gander" label="学生性别" />
          <el-table-column prop="stu_address" label="学生户籍" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="学生课程管理" name="second">
        <el-button type="primary" :icon="Plus" @click="addCourDig()">新增个人课程</el-button>
        <el-table :data="allData.strdentCour" style="width: 100%">
          <el-table-column prop="stu_id" label="学生学号" />
          <el-table-column prop="class_name" label="班级" />
          <el-table-column prop="stu_name" label="学生姓名" />
          <el-table-column prop="cour_name" label="课程" />
          <el-table-column prop="tea_name" label="老师" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </StudentLayout>
  <!-- 新增学生 -->
  <el-dialog v-model="addStudentVisible" title="新增学生" width="500">
    <el-form :model="studentform" @submit.native.prevent label-width="auto">
      <el-form-item label="院系">
        <el-select v-model="studentform.sdept_id" placeholder="请选择院系" @change="changeClass()">
          <el-option :label="item.name" :value="item._id"
            v-for="(item, index) in allData.sdept"
            :key="index"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="班级名称">
        <el-select v-model="studentform.class_name" placeholder="请选择班级" @change="changeStudent">
          <el-option :label="item.name" :value="item.name"
            v-for="(item, index) in allData.classs"
            :key="index"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="学生名称">
        <el-input v-model="studentform.stu_name" />
      </el-form-item>
      <el-form-item label="学生年龄">
        <el-input v-model="studentform.stu_age" />
      </el-form-item>
      <el-form-item label="学生性别">
        <el-select v-model="studentform.stu_gander" placeholder="请选择性别" @change="changeStudent">
          <el-option label="男" value="男" key="男"/>
          <el-option label="女" value="女" key="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="学生户籍">
        <el-input v-model="studentform.stu_address" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary"  @click="insertStudentData">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增学生结束 -->
  <el-dialog v-model="dialogFormVisible" :title="isEdit?'编辑个人课程':'新增个人课程'"
    width="500">
    <el-form :model="formSC" @submit.native.prevent label-width="auto">
      <el-form-item label="院系">
        <el-select v-model="formSC.sdept_id" placeholder="请选择院系" @change="changeClass()">
          <el-option :label="item.name" :value="item._id"
            v-for="(item, index) in allData.sdept"
            :key="index"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="班级名称">
        <el-select v-model="formSC.class_name" placeholder="请选择班级" @change="changeStudent">
          <el-option :label="item.name" :value="item.name"
            v-for="(item, index) in allData.classs"
            :key="index"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="学生名称">
        <el-select v-model="formSC.stu_id" placeholder="请选择学生">
          <el-option :label="item.stu_name" :value="item.stu_id"
            v-for="(item, index) in allData.student"
            :key="index"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-select v-model="formSC.cour_id" placeholder="请选择课程" @change="courChange">
          <el-option :label="item.cour_name" :value="item.cour_id"
            v-for="(item, index) in scrosData"
            :key="index"
            />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="insertSCData">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import StudentLayout from '@/layouts/StudentLayout.vue'

import {
  getTeacherToCourseList,
  getStudentList,
  getStudentCourse,
  insertStudentCourse,
  getSdeptList,
  getClassList,
  insertStudent
} from '@/composables/school'

const activeName = ref('first')
const dialogFormVisible = ref(false)
const addStudentVisible = ref(false)
const isEdit = ref(false)
let form = reactive({
  sdept_id: '',
  class_name: '',
  stu_id: '',
  description: ''
})
let formSC = reactive({
  sdept_id: '',
  class_name: '',
  stu_id: '',
  cour_id: '',
  tea_id: ''
})
let studentform = reactive({
  sdept_id: '',
  sdept_name: '',
  class_name: '',
  stu_id: '',
  stu_name: '',
  stu_age: '',
  stu_gander: '',
  stu_address: ''
})
const addCourDig = () => {
  dialogFormVisible.value = true
  getScore()
}

const courChange = () => {
  scrosData.value.forEach(el => {
    if (formSC.cour_id === el.cour_id) {
      formSC.tea_id = el.tea_id
    }
  })
}
// 新增学生课程
const insertSCData = async () => {
  await insertStudentCourse(formSC).then(res => {
    if (res.code === 200) {
      changeSCdata()
      dialogFormVisible.value = false
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
    }
  })
}

const addStudent = () => {
  addStudentVisible.value = true
}
// 新增学生
const insertStudentData = async () => {
  await insertStudent(studentform).then(async res => {
    if (res.code === 200) {
      allData.value.student = await studentListAjax()
      addStudentVisible.value = false
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
    }
  })
}
// 课程数据
const scrosData = ref([])
const getScore = async () => {
  await getTeacherToCourseList().then(res => {
    scrosData.value = res.data
  })
}
const classListAjax = () => {
  if(!form.sdept_id){
    return []
  }
  let params = { sdept_id: form.sdept_id }
  return getClassList(params).then(res => {
    return res.data
  })
}
const studentListAjax = () => {
  let params = form.class_name ? { class_name: form.class_name } : { sdept_id: form.sdept_id }
  if(!form.class_name && !form.sdept_id){
    return []
  }
  return getStudentList(params).then(res => {
    return res.data
  })
}
const filterSdept = () => {
  allData.value.sdept.forEach(el => {
    if(studentform.sdept_id === el._id) {
      studentform.sdept_name = el.name
    }
  })
}
// 通过院系查班级
const changeClass = async () => {
  form.class_name = ''
  form.sdept_id = addStudentVisible.value
    ? studentform.sdept_id
    : (dialogFormVisible.value ? formSC.sdept_id : form.sdept_id)
  filterSdept()
  allData.value.classs = await classListAjax()
  allData.value.student = await studentListAjax()
}
// 通过班级查学生
const changeStudent = async () => {
  form.class_name = addStudentVisible.value
    ? studentform.class_name
    : (dialogFormVisible.value ? formSC.class_name : form.class_name)
  allData.value.student = await studentListAjax()
}
const studentCourseAjax = () => {
    return getStudentCourse().then(res => {
      return res.data
    })
}
const changeSCdata = async () => {
  allData.value.strdentCour = await studentCourseAjax()
}
const {data: allData} = await useAsyncData('student', async () => {
  const [student, strdentCour, sdept, classs] = await Promise.all([
    studentListAjax(),
    studentCourseAjax(),
    getSdeptList().then(res => {
      return res.data
    }),
    classListAjax()
  ])
  return {student, strdentCour, sdept, classs}
})
</script>
<style scoped>

</style>